import React, { useState, useRef } from 'react';
import { PageContainer } from '@ant-design/pro-layout';
import ProTable from '@ant-design/pro-table';
import AuthorityButton from '@/components/AuthorityButton';
import ModalForm from './components/ModalForm';
import EditMentModalForm from './components/EditMentModalForm';
import { useIntl } from 'umi';
import { message } from 'antd';
import { page, del, getRoleMenus } from './service';

const Tenant = () => {
  const actionRef = useRef();
  const formRef = useRef();
  const [currentRow, setCurrentRow] = useState({});
  // 显示控制
  const [modalVisit, setModalVisit] = useState(false);
  const [editMenuModalVisit, setEditMenuModalVisit] = useState(false);
  const [state, setState] = useState('read');
  const [roleMenus, setRoleMenus] = useState([]);

  const valueEnum = new Map();
  valueEnum.set(0, { text: '禁用', status: 'Error' });
  valueEnum.set(1, { text: '启用', status: 'Success' });
  const columns = [
    {
      title: '主键',
      dataIndex: 'id',
      tip: '规则名称是唯一的key',
      hideInSearch: true,
      hideInTable: true,
    },
    {
      title: '角色名称',
      dataIndex: 'name',
      valueType: 'textarea',
    },
    {
      title: '创建时间',
      dataIndex: 'createAt',
      valueType: 'date',
      hideInSearch: true,
    },
    {
      title: '操作',
      dataIndex: 'option',
      valueType: 'option',
      render: (_, record) => [
        <AuthorityButton
          type={'link'}
          key="Info"
          class={'Info'}
          text={'详情'}
          onClick={() => {
            setState('read');
            setModalVisit(true);
            formRef?.current?.setFieldsValue(record);
          }}
        />,
        <AuthorityButton
          type={'link'}
          key="update"
          class={'update'}
          text={'修改'}
          onClick={() => {
            setState('edit');
            setModalVisit(true);
            formRef?.current?.setFieldsValue(record);
          }}
        />,
        <AuthorityButton
          type={'link'}
          key="update"
          class={'update'}
          text={'授权菜单'}
          onClick={async () => {
            setCurrentRow(record);
            await getRoleMenus(record.id).then((re) => {
              if (re.isSuccess) {
                setRoleMenus(re.data?.map(item => item.id));
              }
            });
            setEditMenuModalVisit(true);
          }}
        />,
        <AuthorityButton
          type={'popconfirm'}
          key="del"
          class={'delete'}
          text={'删除'}
          onConfirm={() => {
            del([record.id]).then((re) => {
              if (re.isSuccess) {
                message.success(re.msg);
                actionRef.current.reload();
              } else {
                message.error(re.msg);
              }
            });
          }}
        />,
      ],
    },
  ];
  const intl = useIntl();
  return (
    <PageContainer>
      <ProTable
        headerTitle="租户"
        actionRef={actionRef}
        rowKey="id"
        search={{
          labelWidth: 120,
        }}
        toolBarRender={() => [
          // eslint-disable-next-line react/jsx-key
          <AuthorityButton
            class={'Add'}
            text={'新增'}
            onClick={() => {
              setState('edit');
              setModalVisit(true);
              formRef?.current?.resetFields();
            }}
          />,
        ]}
        request={async (params) => {
          var queryData = [];
          var total = 0;
          await page(JSON.stringify(params)).then((re) => {
            queryData = re.data.data;
            total = re.data.total;
          });
          return {
            data: queryData,
            success: true,
            total: total,
          };
        }}
        columns={columns}
        pagination={{ defaultPageSize: 10 }}
      />
      {/* ------------------------ */}
      <ModalForm
        actionRef={actionRef}
        modalVisit={modalVisit}
        setModalVisit={setModalVisit}
        state={state}
        formRef={formRef}
        onClose={() => {
          setModalVisit(false);
        }}
      />
      {/* ------------------------ */}
      {editMenuModalVisit ? (
        <EditMentModalForm
          currentRow={currentRow}
          roleMenus={roleMenus}
          modalVisit={editMenuModalVisit}
          setModalVisit={setEditMenuModalVisit}
        />
      ) : (
        ''
      )}
    </PageContainer>
  );
};

export default Tenant;
